<template>
  <view>
    <view v-if="hasLogin">
      <view class="my-space-head">
        <image class="avatar" :src="avatar"></image>
        <view class="user-description">
          <view class="text-left username">{{ this.localData.nickname }}</view>
          <view class="text-left description">{{
            this.localData.phone.substring(0, 3) +
            "*****" +
            this.localData.phone.substring(8)
          }}</view>
        </view>
      </view>
      <view class="description-detail">{{ this.localData.description }}</view>
      <view class="my-space-btns">
        <button class="modify-info-btn" type="primary" @click="onModifyInfo">
          修改信息
        </button>
        <button class="log-out-btn" @click="bindLogin">退出登录</button>
        <button class="cancel-account-btn" type="warn" @click="deleteAccount">
          注销账号
        </button>
      </view>
    </view>
    <view v-else>
      <view class="my-space-head">
        <image class="avatar" :src="avatar"></image>
        <view @click="bindLogin" class="user-description">
          <view class="text-left username">登录/注册</view>
          <view class="text-left description">您还未登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: mapState(["hasLogin", "localData"]),
  data() {
    return {
      description: "测试",
      sex: "男",
      avatar: "/static/empty_avatar.png",
    };
  },
  mounted: function () {},
  methods: {
    ...mapMutations(["logout"]),
    bindLogin: function () {
      if (this.hasLogin) {
        this.logout();
      } else {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
    },
    onModifyInfo: function () {
      uni.navigateTo({ url: "/pages/userMain/mySpace/modifyInfo" });
    },
    deleteAccount: function () {
      uni.navigateTo({ url: "/pages/userMain/mySpace/deleteAccount" });
    },
    openSettingsPage: function () {
      // console.log("uerInfo", this.uerInfo);
      // console.log(this.$http);
      // 微信小程序授权
      //#ifdef MP-WEIXIN
      // console.log("MP-WEIXIN");
      // uni.authorize({
      //   scope: "scope.writePhotosAlbum",
      //   success: (res) => {
      //     console.log("授权成功", res);
      //   },
      //   fail: (err) => {
      //     console.log("未能获取写入相册权限", err);
      //   },
      // });
      //#endif
      // uni.chooseImage({
      //   count: 1,
      //   sourceType: ["album"],
      //   success: (res) => {
      //     console.log("choose img");
      //     uni.saveImageToPhotosAlbum({
      //       filePath: res.tempFilePaths[0],
      //       success: () => {
      //         console.log("success");
      //       },
      //     });
      //   },
      // });
      // uni.openSetting({
      //   success: (res) => {
      //     console.log(res.authSetting);
      //   }
      // })
    },
  },
};
</script>

<style>
.my-space-head {
  display: flex;
  justify-content: flex-start;
}
.avatar {
  display: block;
  margin: 30upx 0 30upx 90upx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.description-detail {
  margin: 0 auto 60rpx auto;
  width: 78%;
  text-align: center;
  color: grey;
  font-size: 0.8em;
}
.my-space-info {
  margin: auto;
}
.text-left {
  text-align: left;
  margin: 5px;
}
.username {
  color: black;
  font-size: 1.2em;
}
.description {
  color: grey;
  font-size: 0.8em;
}
.my-space-btns {
  width: 100%;
}
.user-description {
  text-align: center;
  margin: auto 30upx;
}
</style>